<template>
  <div class="home">
    <div class="top">
      <span>Using attributes</span>
      <el-input
        v-model="roomNo"
        style="width: 150px"
        placeholder="Pick a date"
        :suffix-icon="Calendar"
        class="input1"
      />
      <el-input
        v-model="state"
        style="width: 150px"
        placeholder="Type something"
        :prefix-icon="Search"
        class="input2"
      />
      <el-input
        v-model="reserved"
        style="width: 150px"
        placeholder="Type something"
        :prefix-icon="Search"
        class="input3"
      />
      <el-button type="primary" @click="handleSearch">搜索</el-button>
      <el-button type="primary" @click="handleReset">重置搜索</el-button>
      <el-button type="primary" @click="handleAdd">新增房间</el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="编号" width="180" />
      <el-table-column prop="roomNo" label="房间号" width="180" />
      <el-table-column prop="state" label="是否空房" width="180" />
      <el-table-column prop="reserved" label="是否预定" />
      <el-table-column label="操作按钮">
        <template #default="{ row }">
          <el-button link type="primary" size="small" @click="handleClick(row)">
            删除数据
          </el-button>
          <el-button link type="primary" size="small" @click="handleEdit(row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div>
    <el-drawer v-model="visibleDrawer" :title="title" direction="rtl" size="50%">
      <!-- 添加文章表单 -->
      <el-form label-width="100px" :model="article">
        <el-form-item label="房间号" prop="roomNo">
          <el-input placeholder="请输入标题" v-model="article.roomNo"></el-input>
        </el-form-item>
        <el-form-item label="是否空房">
          <el-select placeholder="请选择" v-model="article.state">
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否预定">
          <el-select placeholder="请选择" v-model="article.reserved">
            <el-option label="是" value="是"></el-option>
            <el-option label="否" value="否"></el-option>
          </el-select>
        </el-form-item>
        <div>
          <el-button type="primary" @click="update">确认修改</el-button>
          <el-button @click="handleCancel">取消修改</el-button>
        </div>
      </el-form>
    </el-drawer>
  </div>
</template>

<script setup>
import { getRoomList, deleteRoom, addRoom, updateRoom ,findRoom} from '@/api/Roomapi'
import { reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const tableData = ref()

//数据模型
const article = ref({
  roomNo: '', // 保持与数据库字段room_no的驼峰匹配
  state: '', // 保持与数据库字段state一致
  reserved: '', // 保持与数据库字段Reserved的驼峰匹配
})

//查询所有数据并在加载时显示
const getRoom = async () => {
  const res = await getRoomList()
  tableData.value = res.data.data
  console.log(res.data.data)
}

//删除数据
const handleClick = async (row) => {
  ElMessageBox.confirm('是否删除?', '确认删除')
    .then(async () => {
      const res = await deleteRoom(row.id)
      getRoom()
      if (res.data.code === 200) {
        ElMessage.success('删除成功')
      } else {
        ElMessage.error('删除失败')
      }
    })
    .catch()
}

//控制抽屉标签
const title = ref('新增房间')

//修改数据按钮点击事件
const handleEdit = async (row) => {
  title.value = '修改'
  article.value.roomNo = row.roomNo
  article.value.state = row.state
  article.value.reserved = row.reserved
  article.value.id = row.id
  //显示抽屉
  visibleDrawer.value = true
}

//添加按钮点击事件
const handleAdd = () => {
  visibleDrawer.value = true
  handleSubmit()
}

//修改数据
const update = async () => {
  //状态设置
  let response
  if (title.value === '新增房间') {
    console.log('前端发送的数据：', article.value)

    // 临时转换为JSON字符串查看结构
    console.log('JSON格式：', JSON.stringify(article.value))
    //添加数据
    response = await addRoom(article.value)
  } else {
    //修改数据
    response = await updateRoom(article.value)
  }
  if (response.data.code === 200) {
    ElMessage.success('操作成功')
    visibleDrawer.value = false
    getRoom()
    handleSubmit()
  } else {
    ElMessage.error('操作失败')
  }
}

//控制抽屉是否显示
const visibleDrawer = ref(false)

//添加时点击取消按钮事件
const handleCancel = () => {
  visibleDrawer.value = false
  handleSubmit()
}

//添加数据
const handleSubmit = async () => {
  title.value = '新增房间'

  article.value.id = null
  article.value.roomNo = ''
  article.value.state = ''
  article.value.reserved = ''

  //清空cont中的内容
  let cdit = document.querySelector('.ql-editor')
  cdit.innerHTML = ''
}
getRoom()

const roomNo = ref('');
const state = ref('');
const reserved = ref('');

//根据条件查询
const handleSearch = async () => {
  let params = {
    roomNo: roomNo.value,
    state: state.value,
    reserved: reserved.value,
  };
  let res = await findRoom(params)
  tableData.value = res.data.data
}

//重置搜索条件
const handleReset = () => {
  roomNo.value = '';
  state.value = '';
  reserved.value = '';
  getRoom();
};

</script>

<style lang="scss" scoped>
.home {
  padding: 20px;
  height: 100%;
  background: white;

  .top {
    span {
      margin-right: 20px;
    }

    .input1 {
      margin-right: 20px;
    }

    .input2 {
      margin-right: 20px;
    }
    .input3 {
      margin-right: 20px;
    }
  }
}
</style>
